
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <title>IconFont</title>
    <link rel="stylesheet" href="demo.css">
    <link rel="stylesheet" href="iconfont.css">
</head>
<body>
    <div class="main markdown">
        <h1>IconFont 图标</h1>
        <ul class="icon_lists clear">
            
                <li>
                <i class="icon iconfont icon-zhengque"></i>
                    <div class="name">正确</div>
                    <div class="fontclass">.icon-zhengque</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-cuowu"></i>
                    <div class="name">错误</div>
                    <div class="fontclass">.icon-cuowu</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-zhengque1"></i>
                    <div class="name">正确</div>
                    <div class="fontclass">.icon-zhengque1</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-sousuo"></i>
                    <div class="name">搜索</div>
                    <div class="fontclass">.icon-sousuo</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-shanchu"></i>
                    <div class="name">删除</div>
                    <div class="fontclass">.icon-shanchu</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-wrong"></i>
                    <div class="name">错误</div>
                    <div class="fontclass">.icon-wrong</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-jilu"></i>
                    <div class="name">记录</div>
                    <div class="fontclass">.icon-jilu</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-tips2"></i>
                    <div class="name">提示</div>
                    <div class="fontclass">.icon-tips2</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-dingdan"></i>
                    <div class="name">订单</div>
                    <div class="fontclass">.icon-dingdan</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-chedaisolid"></i>
                    <div class="name">车贷_Solid</div>
                    <div class="fontclass">.icon-chedaisolid</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-tupian"></i>
                    <div class="name">图片</div>
                    <div class="fontclass">.icon-tupian</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-shenhe1"></i>
                    <div class="name">审核</div>
                    <div class="fontclass">.icon-shenhe1</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-iconfontremind"></i>
                    <div class="name">催</div>
                    <div class="fontclass">.icon-iconfontremind</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-icon-copy-copy"></i>
                    <div class="name">箭头</div>
                    <div class="fontclass">.icon-icon-copy-copy</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-yixiangdengji"></i>
                    <div class="name">意向登记</div>
                    <div class="fontclass">.icon-yixiangdengji</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-c-collection"></i>
                    <div class="name">上门催收</div>
                    <div class="fontclass">.icon-c-collection</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-diya"></i>
                    <div class="name">抵押</div>
                    <div class="fontclass">.icon-diya</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-jiandailixi"></i>
                    <div class="name">建贷利息</div>
                    <div class="fontclass">.icon-jiandailixi</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-kxbcustomers"></i>
                    <div class="name">客户</div>
                    <div class="fontclass">.icon-kxbcustomers</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-jujue"></i>
                    <div class="name">拒绝</div>
                    <div class="fontclass">.icon-jujue</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-hetong"></i>
                    <div class="name">合同</div>
                    <div class="fontclass">.icon-hetong</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-fangda"></i>
                    <div class="name">放大</div>
                    <div class="fontclass">.icon-fangda</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-hetong7"></i>
                    <div class="name">合同7</div>
                    <div class="fontclass">.icon-hetong7</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-iconznxxbig"></i>
                    <div class="name">站内消息big</div>
                    <div class="fontclass">.icon-iconznxxbig</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-caiwu"></i>
                    <div class="name">财务</div>
                    <div class="fontclass">.icon-caiwu</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-riqi"></i>
                    <div class="name">日期</div>
                    <div class="fontclass">.icon-riqi</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-sunhuai"></i>
                    <div class="name">损坏</div>
                    <div class="fontclass">.icon-sunhuai</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-huankuanrili"></i>
                    <div class="name">还款日历</div>
                    <div class="fontclass">.icon-huankuanrili</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-minus"></i>
                    <div class="name">减号</div>
                    <div class="fontclass">.icon-minus</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-huanche"></i>
                    <div class="name">还车</div>
                    <div class="fontclass">.icon-huanche</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-shouyeshouye"></i>
                    <div class="name">首页-首页</div>
                    <div class="fontclass">.icon-shouyeshouye</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-export"></i>
                    <div class="name">导出</div>
                    <div class="fontclass">.icon-export</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-shaixuan"></i>
                    <div class="name">筛选</div>
                    <div class="fontclass">.icon-shaixuan</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-icon1301"></i>
                    <div class="name">资金明细</div>
                    <div class="fontclass">.icon-icon1301</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-huifangguanli"></i>
                    <div class="name">回访管理</div>
                    <div class="fontclass">.icon-huifangguanli</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-jisudaozhang"></i>
                    <div class="name">极速到账</div>
                    <div class="fontclass">.icon-jisudaozhang</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-daihouguanli"></i>
                    <div class="name">贷后管理</div>
                    <div class="fontclass">.icon-daihouguanli</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-daiqianguanli"></i>
                    <div class="name">贷前管理</div>
                    <div class="fontclass">.icon-daiqianguanli</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-daizhongguanli"></i>
                    <div class="name">贷中管理</div>
                    <div class="fontclass">.icon-daizhongguanli</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-riqi1"></i>
                    <div class="name">逾期</div>
                    <div class="fontclass">.icon-riqi1</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-huankuan"></i>
                    <div class="name">还款</div>
                    <div class="fontclass">.icon-huankuan</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-daishenhe"></i>
                    <div class="name">待审核</div>
                    <div class="fontclass">.icon-daishenhe</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-fangkuanqueren"></i>
                    <div class="name">放款确认</div>
                    <div class="fontclass">.icon-fangkuanqueren</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-chaoediya"></i>
                    <div class="name">超额抵押</div>
                    <div class="fontclass">.icon-chaoediya</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-kehu"></i>
                    <div class="name">客户</div>
                    <div class="fontclass">.icon-kehu</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-kehudongcha"></i>
                    <div class="name">客户洞察</div>
                    <div class="fontclass">.icon-kehudongcha</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-message"></i>
                    <div class="name">站内信</div>
                    <div class="fontclass">.icon-message</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-dengdaitijiao"></i>
                    <div class="name">等待提交</div>
                    <div class="fontclass">.icon-dengdaitijiao</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-money_deposit"></i>
                    <div class="name">押金补缴</div>
                    <div class="fontclass">.icon-money_deposit</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-pinggu"></i>
                    <div class="name">评估</div>
                    <div class="fontclass">.icon-pinggu</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-zhangdan"></i>
                    <div class="name">账单结清</div>
                    <div class="fontclass">.icon-zhangdan</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-luruxinxi"></i>
                    <div class="name">录入信息</div>
                    <div class="fontclass">.icon-luruxinxi</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-qianzhengyajin"></i>
                    <div class="name">签证押金</div>
                    <div class="fontclass">.icon-qianzhengyajin</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-dian"></i>
                    <div class="name">点</div>
                    <div class="fontclass">.icon-dian</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-jujue1"></i>
                    <div class="name">拒绝</div>
                    <div class="fontclass">.icon-jujue1</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-daozhangqueren"></i>
                    <div class="name">到账确认</div>
                    <div class="fontclass">.icon-daozhangqueren</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-kaoqin"></i>
                    <div class="name">考勤</div>
                    <div class="fontclass">.icon-kaoqin</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-judan"></i>
                    <div class="name">拒单</div>
                    <div class="fontclass">.icon-judan</div>
                </li>
            
        </ul>

        <h2 id="font-class-">font-class引用</h2>
        <hr>

        <p>font-class是unicode使用方式的一种变种，主要是解决unicode书写不直观，语意不明确的问题。</p>
        <p>与unicode使用方式相比，具有如下特点：</p>
        <ul>
        <li>兼容性良好，支持ie8+，及所有现代浏览器。</li>
        <li>相比于unicode语意明确，书写更直观。可以很容易分辨这个icon是什么。</li>
        <li>因为使用class来定义图标，所以当要替换图标时，只需要修改class里面的unicode引用。</li>
        <li>不过因为本质上还是使用的字体，所以多色图标还是不支持的。</li>
        </ul>
        <p>使用步骤如下：</p>
        <h3 id="-fontclass-">第一步：引入项目下面生成的fontclass代码：</h3>


        <pre><code class="lang-js hljs javascript"><span class="hljs-comment">&lt;link rel="stylesheet" type="text/css" href="./iconfont.css"&gt;</span></code></pre>
        <h3 id="-">第二步：挑选相应图标并获取类名，应用于页面：</h3>
        <pre><code class="lang-css hljs">&lt;<span class="hljs-selector-tag">i</span> <span class="hljs-selector-tag">class</span>="<span class="hljs-selector-tag">iconfont</span> <span class="hljs-selector-tag">icon-xxx</span>"&gt;&lt;/<span class="hljs-selector-tag">i</span>&gt;</code></pre>
        <blockquote>
        <p>"iconfont"是你项目下的font-family。可以通过编辑项目查看，默认是"iconfont"。</p>
        </blockquote>
    </div>
</body>
</html>
